<template>
  <!-- 作业部分 -->
  <div v-auth v-if="detail.name">
    <NuxtLayout name="shadow">
      <template #header-left>
        <h1 class="shadow-title column a-l_c">
          我的作业
        </h1>
        <span class="shadow-update-time">更新于{{ detail.hand_time }}</span>
      </template>

      <template #header-right>
        <NuxtLink to="/study-plan" class="shadow-study-plan-link">
          查看学习计划
          <span class="shadow-arrow">›</span>
        </NuxtLink>
      </template>

      <div class="homeWork-box-list">
        <!-- 左侧内容 -->
        <div class="left-home">
          <!-- 考试部分 -->
          <div class="exam-section">
            <h2 class="section-title">考试</h2>
            <div class="exam-list">
              <div
                class="exam-item"
                v-for="(item, index) in detail.paperList"
                :key="index"
              >
                <div class="exam-title">
                  {{ item.title }}
                </div>
                <button
                  class="enter-exam-btn"
                  v-if="item.is_submit == 0"
                  @click="handelContinueExam(item)"
                >
                  进入考试
                  <span class="arrow">›</span>
                </button>
                <!-- <NuxtLink to="/exam" class="enter-exam-btn">
                进入考试
                <span class="arrow">›</span>
              </NuxtLink> -->
              </div>
            </div>
          </div>

          <!-- 文档作业部分 -->
          <div class="doc-section">
            <h2 class="section-title">文档作业</h2>
            <div class="doc-list">
              <div class="doc-item" v-for="(item, index) in detail.fileList" :key="index">
                <div class="doc-title">{{ item.name }}</div>
                <button class="download-btn">
                  点击下载
                  <span class="download-icon">↓</span>
                </button>
              </div>
            </div>
          </div>
        </div>

        <el-divider direction="vertical" style="height: auto" />

        <!-- 右侧内容 -->
        <div class="right-home column">
          <div class="homework-instruction column">
            <h2 class="instruction-title">作业说明</h2>
            <div class="instruction-content column">
              <p class="instruction-text">
                {{ detail.description }}
              </p>
              <button class="submit-btn">提交作业</button>
            </div>
          </div>
        </div>
      </div>
    </NuxtLayout>
  </div>
</template>
<script setup>
import dayjs from "dayjs";
import { useRoute, useRouter } from "vue-router";
import { ref, reactive, computed, onMounted, watch } from "vue";
import { getHomeworkDetail } from "@/service/exam.js";
import { useExam } from "@/stores/exam.js";
const examStore = useExam();
const route = useRoute();
const router = useRouter();

const detail = ref({});

// 继续答题
const handelContinueExam = async (paper) => {
  examStore.examInfo.type3 = 1; //  作业练习等同于考试练习  type3不能为3或5
  examStore.examInfo.examid = detail.value.id;
  examStore.examInfo.paperid = paper.id;
  router.push({ path: "/answerExam" });
};

// 我的作业信息
const getHomeworkDetailFn = async () => {
  const data = { id: 0 };
  const res = await getHomeworkDetail(data);
  if (res.code === "000000") {
    detail.value = {
      ...res.data,
      hand_time: dayjs(res.data.hand_time * 1000).format("YYYY-MM-DD HH:mm:ss"),
    };
  }
};

onMounted(() => {
  getHomeworkDetailFn();
});
</script>
<style scoped lang="scss">
// 通用样式
.shadow {
  &-title {
    font-size: 20px;
    color: #333333;
  }

  &-update-time {
    font-size: 14px;
    color: #999999;
    margin-left: 10px;
  }

  &-study-plan-link {
    font-size: 14px;
    color: #333333;
    text-decoration: none;
  }

  &-arrow {
    margin-left: 5px;
  }
}

// 作业列表样式
.homeWork-box-list {
  display: flex;

  .left-home {
    flex: 0 0 auto;
  }

  .right-home {
    flex: 1;
    padding: 0 20px;
  }
}

// 考试和文档部分
.section-title {
  font-size: 18px;
  color: #333;
  margin-bottom: 15px;
}

.exam-list,
.doc-list {
  display: flex;
  flex-direction: column;
  width: 348px;
}

.exam-list {
  gap: 9px;
}

.exam-item,
.doc-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-radius: 8px;
}

.exam-title,
.doc-title {
  flex: 1;
  font-size: 14px;
  color: #333;
  font-weight: 600;
  width: 248px;
}

.enter-exam-btn,
.download-btn {
  padding: 8px 15px;
  color: #2b5b7b;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  border: none;
  background: none;
  cursor: pointer;
}

.arrow,
.download-icon {
  font-size: 16px;
}

.doc-section {
  margin-top: 20px;
}

// 作业说明部分
.homework-instruction {
  background: #fff;
  border-radius: 8px;
  flex: 1;

  .instruction-title {
    font-size: 18px;
    color: #333;
    margin-bottom: 15px;
  }

  .instruction-content {
    // display: flex;
    // flex-direction: column;
    // flex: 1;
    // gap: 20px;
    flex: 1;
  }

  .instruction-text {
    flex: 1;
    font-size: 14px;
    color: #666;
  }

  .submit-btn {
    align-self: flex-end;
    padding: 12px 40px;
    background: #2b5b7b;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;

    &:hover {
      background: #234b66;
    }
  }
}

// GMAT考试练习部分
.homeWork-box-list-gmat {
  .practice-content {
    display: flex;
  }

  // 左侧导航
  .left-nav {
    width: 184px;
    border-right: 1px solid #ddd;
    cursor: pointer;

    .nav-section {
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }

      h3 {
        font-size: 16px;
        color: #333;
        margin-bottom: 10px;
      }

      .nav-items {
        display: flex;
        justify-content: space-between;
      }

      .nav-item {
        font-size: 14px;
        color: #666;
        width: 82px;
        cursor: pointer;

        &.active {
          color: #2b5b7b;
        }

        &:hover {
          color: #2b5b7b;
        }
      }
    }
  }

  // 右侧内容
  .right-content {
    flex: 1;
    background: #fff;
    border-radius: 8px;
    margin-left: 20px;

    .hug-count {
      color: #2b5b7b;
      font-size: 16px;
      margin-bottom: 20px;
    }

    .practice-types {
      display: flex;
      gap: 15px;
      margin-bottom: 20px;
    }

    .type-btn {
      padding: 8px 20px;
      border: 1px solid #ddd;
      border-radius: 8px;
      background: #fff;
      cursor: pointer;

      &.active {
        border-color: #2b5b7b;
        color: #2b5b7b;
      }
    }

    .practice-desc {
      background: #f5f5f5;
      padding: 15px;
      border-radius: 8px;
      color: #666;
      font-size: 14px;
      line-height: 1.6;
      margin-bottom: 20px;
    }

    .practice-settings {
      display: flex;
      flex-direction: column;
      gap: 15px;
      margin-bottom: 30px;

      .setting-item {
        display: flex;
        align-items: flex-start;
        // border-bottom: 1px solid #ccc;
        flex-direction: column;

        &.two {
          margin-left: 60px;

          .setting-options:nth-child(1) {
            width: 38px;
            color: #333;
            font-size: 14px;
          }
        }

        &.three {
          margin-left: 60px;
          display: flex;
          gap: 10px;
          flex-wrap: wrap;

          .setting-options:nth-child(1) {
            width: 38px;
            color: #333;
            font-size: 14px;
          }
        }

        .setting-label {
          width: 60px;
          color: #333;
          font-size: 14px;
        }

        .setting-options {
          display: flex;
          gap: 10px;
          flex-wrap: wrap;
        }

        .option {
          border-radius: 4px;
          font-size: 14px;
          color: #666;
          cursor: pointer;

          &.active {
            color: #2b5b7b;
          }
        }
      }
    }

    .start-btn {
      width: 161px;
      padding: 12px;
      background: #2b5b7b;
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.3s;

      &:hover {
        background: #234b66;
      }
    }
  }
}

// 考试记录部分
.shadow-update-time-wrapper {
  display: inline-flex;
  margin-left: 10px;

  .shadow-update-time {
    font-size: 14px;
    color: #999999;
    padding: 4px 10px;
    cursor: pointer;
    position: relative;
    border: 1px solid #999999;
    border-radius: 4px;

    &:not(:last-child)::after {
      content: "";
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 1px;
      height: 12px;
      background-color: #dddddd;
    }

    &:hover {
      color: #2b5b7b;
      border: 1px solid #126983;
    }

    &.active {
      color: #2b5b7b;
      font-weight: 500;
      border: 1px solid #126983;
    }
  }
}

.record-tabs {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;

  .tab-btn {
    padding: 8px 20px;
    border: 1px solid #ddd;
    border-radius: 20px;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    color: #666;

    &.active {
      border-color: #2b5b7b;
      color: #2b5b7b;
    }
  }
}

.record-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}

.record-item {
  background: #fff;
  border-radius: 8px;
  padding: 10px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  // .record-left {}

  .record-info {
    display: flex;
    align-items: center;

    .record-date {
      font-size: 14px;
      color: #666;
      margin-bottom: 5px;
    }

    .record-title {
      font-size: 16px;
      color: #333;
      font-weight: 500;
    }
  }

  .record-stats {
    display: flex;
    gap: 20px;
    color: #666;
    font-size: 14px;
    margin-top: 10px;
  }

  .record-actions {
    display: flex;
    gap: 10px;

    button {
      padding: 8px 15px;
      border-radius: 4px;
      font-size: 14px;
      cursor: pointer;
    }

    .view-btn {
      border: 1px solid #ddd;
      background: #fff;
      color: #666;
    }

    .continue-btn {
      background: #2b5b7b;
      border: none;
      color: white;

      &:hover {
        background: #234b66;
      }
    }
  }
}

.progressContainer {
  margin-top: 20px;

  :deep(.progress-card) {
    &:nth-child(2) {
      margin-top: 0px !important;
    }
  }
}

.shadow-container-box-out {
  background: #fff;
  // border-radius: 8px;
  padding: 46px 0px 16px;
  // box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  width: 100%;
  // max-width: 1200px;
  // margin: 20px auto ;
  position: relative;

  &::before {
    content: "";
    width: 57px;
    height: 57px;
    background: url("/static/Vector2.png") no-repeat center/100%;
    background-size: contain;
    position: absolute;
    left: -24px;
    top: 0;
  }

  .shadow-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 11px;
  }

  .shadow-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .shadow-header-right {
    display: flex;
    align-items: center;
  }

  .shadow-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin: 0;
    // margin-left: 69px;
  }

  .shadow-update-time {
    color: #999;
    font-size: 14px;
    margin-left: 10px;
  }

  .shadow-study-plan-link {
    display: flex;
    align-items: center;
    color: #666;
    text-decoration: none;
    font-size: 14px;

    .shadow-arrow {
      margin-left: 4px;
      font-size: 16px;
    }

    &:hover {
      color: #409eff;

      .shadow-arrow {
        color: #409eff;
      }
    }
  }
}

.default-button {
  width: 104px;
  height: 42px;
  text-align: center;

  border-radius: 8px;
  background-color: #fff;
  // border-width: 1px;
  border: 1px solid #ccc;

  &.active {
    border: 1px solid #126983;
    color: #126983;
  }
}
</style>
